昨天終於讓 Codex 建立了「泰語小旅伴」的第一個專案，也開始理解 HTML、CSS 和 JavaScript 各自負責什麼。

當時我直接打開 index.html，瀏覽器成功顯示首頁，Console 也出現了「Thai Buddy 已載入」的訊息。

原本以為這樣就可以繼續往下做，沒想到 Console 裡還有另一個看不懂的訊息：

Unsafe attempt to load URL file:///...

網頁明明打得開，為什麼還會出現這個訊息？

這也是我第一次發現，原來網頁能正常顯示，不代表開發環境就已經準備好了。

明明首頁有出來，問題在哪裡？

一開始，我是直接雙擊 index.html 來開啟網頁。

這個做法很直覺。畢竟檔案已經在電腦裡，想看結果，當然就直接打開它。

瀏覽器也確實顯示了 Codex 建立的歡迎畫面。不過，當我打開 Console 檢查時，除了預期的載入訊息，還看到了前面那行 Unsafe attempt to load URL。

因為看不懂這個訊息代表什麼，我就把它拿回 ChatGPT 討論。

這次沒有馬上請 Codex 修改程式，而是先搞清楚：現在到底是 App 的程式有問題，還是開啟網頁的方式需要調整？

原來直接打開 HTML，網址是 file://

和 ChatGPT 討論後，我才開始認識 file://。

原本直接雙擊 index.html 時，瀏覽器網址列顯示的不是平常常見的 https://，而是類似：

file:///C:/.../thai-buddy/index.html

file:// 代表瀏覽器正在直接讀取電腦上的本機檔案。

這樣確實可以開啟 HTML，也可能正常顯示文字和樣式，但瀏覽器對本機檔案的存取有安全限制，部分資源載入或 JavaScript 功能可能會因此受到影響。

至於這次 Console 訊息涉及哪一項具體的存取限制，光看截取下來的訊息還無法完整判定。

不過，這也讓我理解了一件事：

畫面有出來，只能代表目前看到的部分可以顯示，不能證明後面的功能都能正常運作。

後來 ChatGPT 建議改用本機開發伺服器，讓瀏覽器透過 HTTP 來存取專案，而不是一直直接開啟 HTML 檔案。

localhost 又是什麼？

接著，我第一次接觸到 localhost。

ChatGPT 幫我整理的概念是，可以先把它想成「自己的電腦」。

當電腦啟動本機伺服器後，就能透過 HTTP 的方式，讓瀏覽器向伺服器取得專案檔案。

例如這次使用的網址：

http://localhost:8000/

可以先簡單拆成三個部分：

• http://：透過 HTTP 通訊。
• localhost：指向自己的電腦。
• 8000：這次伺服器使用的連接埠。

其中，連接埠可以先理解成用來區分電腦上不同網路服務的編號。

對目前的我來說，最重要的是先分清楚這兩種開啟方式：

原本：

file:///C:/.../thai-buddy/index.html


改成：

http://localhost:8000/

前者是瀏覽器直接讀取本機檔案，後者則是透過本機伺服器提供網頁。

兩種方式都可能看到相同的首頁，但存取方式不同，也可能受到不同的瀏覽器安全限制。

改用本機伺服器並不代表所有錯誤都會自動消失，而是讓我們能透過 HTTP 來開發和測試網頁，也比較符合接下來的需求。

至於更深入的網路原理，我決定先不用一次全部搞懂，至少先知道為什麼需要改變開啟方式。

請 Codex 啟動本機伺服器，結果也不是一次成功

知道需要本機伺服器後，接下來就要實際把它啟動。

這個部分同樣交給 Codex 處理。

根據 Codex 留下的工作紀錄，它第一次嘗試使用：

py -m http.server

但指令沒有成功，因為執行環境找不到 py。

這裡的 py 是 Windows 上可能提供的 Python 啟動器指令，但不是每個執行環境都一定有。

所以這次問題不在 HTML、CSS 或 JavaScript，而是 Codex 嘗試使用的啟動指令，在當時的環境中無法執行。

後來 Codex 改用已確認存在的 Python 執行檔，才成功啟動本機伺服器。

最後使用的網址是：

http://localhost:8000/

這次也讓我開始接觸到另一個觀念：

程式碼沒有問題，不代表執行環境就一定沒有問題。

就算只是啟動一個本機伺服器，也可能因為執行環境不同，遇到預期之外的狀況。

這次要怎麼確認真的成功？

Codex 成功啟動伺服器後，並不是只回報「已啟動」就結束。

根據這次的開發紀錄，它也確認了 HTTP 回應狀態為：

200

HTTP 200 可以先簡單理解成：這次 HTTP 請求已經成功。

這代表本機伺服器能正常回應這次請求，但還不能證明整個 App 的所有功能都已經通過測試。

回頭看，前一天我已經確認過首頁能顯示，JavaScript 的載入訊息也會出現在 Console；今天則進一步處理了開啟方式，並透過 Codex 的測試紀錄確認本機伺服器成功回應。

兩次驗收的重點其實不一樣。

前一天主要確認網頁的基本內容與 JavaScript 是否能執行，今天則是在確認開發時存取網頁的方式。

這也提醒我，之後遇到功能問題時，除了檢查程式碼，可能還需要回頭確認目前使用的開發環境。

今天學到什麼？

Day 5 沒有替「泰語小旅伴」增加新課程，也沒有做出新的畫面，但我覺得這一天還是很重要。

因為我開始分清楚幾件事。

首先，HTML 檔案能被瀏覽器打開，不代表所有功能都能正常運作。

再來，file:// 和 http://localhost:8000/ 是不同的開啟方式。前者是直接讀取本機檔案，後者則是透過本機伺服器提供網頁。

最後，遇到錯誤訊息時，不一定代表 App 的程式碼寫壞了，也可能和執行環境或操作方式有關。

這次如果只是看到首頁顯示成功，就直接進入下一個功能，我可能根本不會注意到這些差別。

也因為實際遇到問題，再回頭問 ChatGPT、讓 Codex 協助處理，我才開始理解為什麼開發環境也是做 App 的一部分。

接下來，本機開發的方式已經有了，終於可以把注意力放回 App 本身。

目前的首頁還只有簡單的歡迎內容，距離我想像中的「泰語小旅伴」還有一段距離。

下一篇，就來討論真正的首頁應該有哪些東西，並把它做得更像一個手機 App。